<template>
	<view class="content">
		<!-- 头部 -->
		<view class="content-top">
			<view class="nav-top">
				<!-- 搜索-->
				<view class="nav-content">
					<icon class="search" type="search" size="15" />
					<view class="inter" @click="toSearch">请输入搜索的关键词</view>
				</view>
			</view>
			<!-- 地区 -->
			<!-- <view class="nav">
				<view class="nav-item" @click="showAreaPicker">
					<view class="nav-item-name">
						{{areaPickerDefaultName}}
					</view> 
				<img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/arrowD.png" alt="" class="arrowD">
				</view>
			</view> -->
		</view>


		<view class="picker-wrapper">
			<!-- //行业选择 -->
			<!-- <mpvue-picker :themeColor="themeColor" ref="industryPicker" mode="selector" :deepLength="1" :pickerValueDefault="indusryPickerDefault"
			 @onConfirm="selectIndustry" :pickerValueArray="industryArray"></mpvue-picker> -->

			<!-- //区域二级选择 -->
			<mpvue-picker :themeColor="themeColor" ref="areaPicker" mode="multiLinkageSelector" :deepLength="2"
			 :pickerValueDefault="areaPickerDefault" @onConfirm="selectArea" :pickerValueArray="areaArray"></mpvue-picker>
		</view>

		<!-- 企业列表 -->
		<view class="intro">
			<view class="swiper">
				<swiper class="swiper-body" indicator-dots="true" autoplay="true" circular="true">
					<swiper-item v-for="(item,index) in bannerList" :key='index' @click="toDetail(item.link_url)">
						<image :src="item.img_url" mode="scaleToFill"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- <view class="intro-list">
				<view class="lists" @click="toEnterpriseDetail(item)" v-for="(item,index) in  brandData" :key="index">
					<image class="intro-list-item-img" :src="item.logo"></image>
					<view class="brand">
						<view class="intro-list-item-name">{{item.name}}</view>

						<view class="icon">
							<view class="left" v-if="item.province && item.city ">
								{{item.province}}{{item.city}}
							</view>
							<view class="left" v-else>
								暂无地址
							</view>
							<view class="right">
								<view class="num">{{item.like_num}}</view>
								<image src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/liked.png" v-if="item.is_already_like==1"
								 mode="widthFix" @click.stop="sendLike(item.id,item.type)"></image>
								<image src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/hand.png" v-else mode="widthFix"
								 @click.stop="sendLike(item.id,item.type,index)"></image>
							</view>
						</view>

					</view>
				</view>

				<view class="null" v-if="brandData.length==0">
					暂无数据~~
				</view>
			</view> -->

		</view>

		<!-- <view class="total">
			<text>{{brandData.length}}/{{total.total}}</text>
		</view> -->

		<navBar></navBar>
	</view>
</template>

<script>
	import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
	import CITYDATA from '@/common/city.data.js';
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex';
	import navBar from '@/pages/components/navBar/index.vue'
	export default {
		data() {
			return {
				userToken: '',
				brandData: '',
				personData: '',
				total: '',
				sendLikes: '',
				page: 1,
				themeColor: '#0180CF',
				areaPickerDefault: [0, 0], //区域的初始值
				areaPickerDefaultName: '地区',
				areaName: '', //地区名
				areaArray: CITYDATA, //区域的数据
				bannerList: [],
			}
		},
		components: {
			mpvuePicker,
			navBar
		},
		computed: {
			...mapState('userInfo', {
				userInfo: state => state.userInfo
			}),
		},
		onShow() {
			getApp().globalData.navBarIndex = 0
			let userToken = uni.getStorageSync('userToken');
			this.userToken = userToken;
			// this.getIndex();
			uni.hideTabBar();
			this.getCarousel();
			// this.sendLike();
		},
		onLoad() {

			this.getIndex();
		},
		onPullDownRefresh() {
			this.page = 1;
			this.getIndex()
		},
		watch: {
			areaName(newValue, oldValue) {
				this.getIndex()
			}
		},
		methods: {
			showIndustryPicker() {
				this.$refs.industryPicker.show()
			},
			showAreaPicker() {
				this.$refs.areaPicker.show()
			},
			selectArea(val) {
				//选择地区
				let totalName = val.label;
				this.areaName = totalName.split('-')[1];
				this.areaPickerDefaultName = this.areaName;
				this.page = 1;
				this.getIndex();
			},
			toLogin() {
				uni.navigateTo({
					url: "/pages/login/index"
				})
			},
			toDetail(link) {
				uni.navigateTo({
					url: link
				})
			},
			toPoster() {
				uni.navigateTo({
					url: '/pages/poster/index'
				})
			},
			toEnterpriseDetail(item) {
				//跳转企业详细
				uni.navigateTo({
					url: `/pages/companyDetail/index?companyId=${item.id}`
				})
			},
			toSearch() {
				// 跳转到搜索页面
				uni.navigateTo({
					url: `/pages/search/index`
				})
			},
			async getCarousel(){
				//获取轮播图
				const res = await this.$api.getCarousel({user_token:this.userToken});
				if(res.data.level == 'success'){
					this.bannerList = res.data.data;
				}
			},
			async getIndex() {

				//获取首页
				let param = {
					page: this.page,
					city: this.areaName == "全部" ? '' : this.areaName,
					user_token: uni.getStorageSync('userToken')
				}
				// wx.showLoading({
				// 	mask:true,
				// 	title:'加载中'
				// })
				let res = await this.$api.getIndex(param);
				if (res.data.level == 'success') {
					if (this.page == 1) {
						this.brandData = res.data.data;
					} else {
						this.brandData = this.brandData.concat(res.data.data);
					}

					this.total = res.data.page_info;
				}
				// wx.hideLoading()
			},

			async sendLike(id, type, index) {
				//获取点赞
				let param = {
					user_token: uni.getStorageSync('userToken')
				}
				if (type == 'company') {
					param.company_id = id;
				}
				// console.log('param',param)
				let res = await this.$api.sendLike(param)
				if (res.data.level == 'success') {
					uni.showToast({
						icon: 'success',
						title: res.data.message,
						duration: 1500
					});
					let str = this.brandData;
					str[index].is_already_like = 1;
					str[index].like_num++;
					this.brandData = [];
					this.brandData = str;
				} else {
					uni.showToast({
						icon: 'none',
						title: res.data.message,
						duration: 1500
					})
				}
			},
		},
		onShareAppMessage() {
			return {
				title: '明媒品牌',
				desc: '明媒品牌'
			}
		},
		onReachBottom() {
			if (this.page < Math.ceil(this.total.total / this.total.limit)) {
				this.page++;
				this.getIndex();
			} else {
				uni.showToast({
					icon: 'none',
					title: '已经到底~'
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	@import'~@/common/scss/common.scss';

	.content-top {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		width: 100%;
	}

	.nav {
		padding: 20rpx 0;
		position: fixed;
		background: #fff;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		z-index: 100;

		.nav-item {
			display: flex;
			align-items: center;
			width: 50%;
			justify-content: center;

			image {
				margin-left: 10rpx;
				width: 20rpx;
				height: 15rpx;
			}

			&:last-child {
				margin-left: 40rpx;
			}

			.nav-item-name {
				max-width: 200rpx;
				@include ellipsis(1)
			}
		}
	}

	.nav-top {
		background-image: linear-gradient(-135deg, #57D1E2 0%, #37AED6 100%);
		padding: 30rpx;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.home {
		font-size: 40rpx;
		font-weight: 600;
		padding: 20rpx 0 30rpx 0;
	}

	// 搜索
	.nav-content {
		width: 100%;
		position: relative;

		.search {
			position: absolute;
			top: 15rpx;
			left: 10rpx;
			z-index: 100;
		}

		.close {
			position: absolute;
			top: 20rpx;
			right: 10rpx;
			z-index: 100;
		}
	}

	.inter {
		font-size: 30rpx;
		padding: 10rpx 60rpx;
		background: #fff;
		color: #666;
		border-radius: 10rpx;
	}

	.num {
		position: absolute;
		right: 60rpx;
		color: #666;
		font-size: 30rpx;
		line-height: 30rpx;
	}

	.icon {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-top: 40rpx;
		padding: 0 20rpx;
		width: calc(100% - 40rpx);

		.left {
			max-width: 60%;
			height: 50rpx;
			line-height: 50rpx;
			font-size: 28rpx;
			color: #555555;
		}

		.right {
			margin-left: auto;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: flex-start;
		}
	}

	.icon image {
		width: 30rpx;
		height: 30rpx;
	}

	.intro {
		overflow: hidden;
		background: #FFFFFF;
		position: relative;
		top: 120rpx;
		min-height: calc(100vh - 220rpx);
		// margin-top: 30rpx;
		padding: 0 0 100rpx 0;
	}
	.swiper{
		width: calc(100vw - 60rpx);
		height: calc((100vh - 220rpx)*0.8);
		background: #FFFFFF;
		margin: calc((100vh - 220rpx)*0.02) auto;
		overflow: hidden;
		border-radius: 20rpx;
	}
	.swiper-body{
		width: 100%;
		height: 100%;
		overflow: hidden;
		border-radius: 20rpx;
		image{
			width: 100%;
			height: 100%;
			overflow: hidden;
			border-radius: 20rpx;
		}
	}
	.intro-list {
		padding: 30rpx;
	}

	.lists {
		border-radius: 20rpx;
		float: left;
		width: calc((100vw - 90rpx)/2);
		overflow: hidden;
		height: 500rpx;
		background: #fff;
		position: relative;

		&:nth-child(even) {
			margin-left: 30rpx;
			margin-bottom: 30rpx;
		}

	}

	.intro-list-item-img {
		width: 100%;
		height: 300rpx;
	}

	.intro-list-item {
		width: 100%;
		clear: both;
	}

	.intro-list-item-name {
		font-weight: 600;
		font-size: 36rpx;
		text-indent: 30rpx;
		padding: 20rpx 0;
		width: 100%;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.intro-list-item-desc {
		width: 100%;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		text-indent: 30rpx;
		font-size: 30rpx;
		color: #666;
	}

	.total {
		position: fixed;
		bottom: 120rpx;
		right: 40%;
		margin: 0 auto;
		width: 150rpx;
		background: #fff;
		border-radius: 5rpx;
		padding: 10rpx;
		border: 1rpx solid #ccc;
		font-size: 30rpx;
		text-align: center;
	}
</style>
